<script setup lang="ts">
import { useRoute }from 'vue-router'
import {useCounterStore} from '@/stores/modules/useCounter.ts'
import {storeToRefs} from 'pinia'

const counterStore=useCounterStore()
const {counter,getInfo}=storeToRefs(counterStore)
function addition(){
  counterStore.counter++
}
console.log(getInfo,'>>>>>>>.')

function patchCount(){
  counterStore.$patch({counter:counterStore.counter+2})
}

function patchFun(){
  // counterStore.$patch(state=>state.counter+=5)
  // 或者 使用这种方法即修改所有state值
  counterStore.$state={counter:counterStore.counter+1,name:'lihua'}
}

function actionHelp(){
counterStore.setCounter(123)
}

counterStore.$subscribe((mutation,state)=>{
  console.log(state,mutation,'subscribe')

});

counterStore.$onAction((mutation)=>{
  console.log(mutation,'onAction')
});
//实例方法
function resetStore(){
  counterStore.$reset();
  // counterStore.$dispose();//销毁这个pinia
}

const route=useRoute()

console.log(route,'route')
</script>

<template>
  <!--  getters-->
<text>{{getInfo}}</text>
<br>
<div>pinia存储的值：{{counterStore.counter}}</div>
<!--  直接解构不会触发页面更新，需要通过改变引用类型属性的方式更改-->
<button @click="addition">点我改引用值</button>
<!--  可以通过api解构成响应式数据-->
<button @click="counter++">点我直接加1</button>
<!--  通过patch更改-->
<button @click="patchCount">点我通过$patch触发</button>
<button @click="patchFun">点我通过$path函数触发</button>
<!--通过提交actions-->
<button @click="actionHelp">actions辅助改值</button>
<!--  实例api-->
<button @click="resetStore">点我重置</button>
</template>

<style scoped lang="scss">

</style>
